<template>
    <div class="model-cards-wrapper">
        <div class="model-cards-header">
            <el-input class="search-box" placeholder="搜索模型" suffix-icon="Search" round></el-input>
            <div class="model-view-switch">
                <div class="model-view-btn" :class="_model_view === 'model_cloud' ? 'selected' : ''"
                    @click="_model_view = 'model_cloud'">模型库</div>
                <div class="model-view-btn" :class="_model_view === 'model_local' ? 'selected' : ''"
                    @click="_model_view = 'model_local'">训练任务</div>
                <div class="model-view-btn" :class="_model_view === 'eval_panel' ? 'selected' : ''"
                    @click="_model_view = 'eval_panel'">评测详情</div>
            </div>
        </div>
        <div class="model-cards-body">
            <ModelsCloud v-if="_model_view == 'model_cloud'" @show-models-local="onShowModelsLocal"></ModelsCloud>
            <ModelsLocal v-if="_model_view == 'model_local'" @show-eval-details="onShowEvalDetails"></ModelsLocal>
            <EvalPanel ref="eval_panel" v-if="_model_view == 'eval_panel'"> </EvalPanel>
        </div>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance, nextTick } from 'vue';
import ModelsCloud from './ModelsCloud.vue';
import ModelsLocal from './ModelsLocal.vue';
import EvalPanel from './EvalPanel.vue';

const name = 'ModelPanel';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['loadDataset']);
defineExpose({ handleKeyDown });
let _model_view = ref('model_cloud');

async function onShowModelsLocal() {
    _model_view.value = 'model_local';
}

async function onShowEvalDetails(params) {
    // console.log('onShowEvalDetails eval_results = ', eval_results);
    _model_view.value = 'eval_panel';
    await nextTick();
    proxy.$refs.eval_panel.setEvalResults(params);
}

function handleKeyDown(event) {
    proxy.$refs.eval_panel && proxy.$refs.eval_panel.handleKeyDown(event);
}

</script>

<style scoped>
.model-cards-wrapper {
    background-color: rgb(239, 241, 243);
    width: calc(100% - 64px);
    height: 100%;
    padding: 0px;
    box-sizing: border-box;
}

.model-cards-body {
    display: flex;
    width: 100%;
    height: calc(100% - 53px);
}

.model-cards-header {
    display: flex;
    background-color: rgb(249, 248, 248);
    align-items: center;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.search-box {
    width: 300px;
    border-radius: 10px;
}

.model-view-switch {
    display: flex;
    position: absolute;
    right: 10px;
}

.model-view-btn {
    background-color: aquamarine;
    padding: 8px;
    width: 80px;
    margin-right: 1px;
    text-align: center;
    font-size: 12px;
    background-color: rgb(98, 92, 92);
    /* box-shadow: inset 2px 2px 5px rgb(67, 67, 67); */
    color: aliceblue;
    cursor: pointer;
}

.model-view-btn.selected {
    background-color: rgb(224, 93, 93);
    box-shadow: inset 2px 2px 5px rgb(154, 56, 56);
}
</style>
